<template>
  <div class="flex store-detail">
    <div class="content">
      <p class="name">{{ storeDetail.name }}</p>
      <div class="flex">
        <p>
          <el-rate :value="5"></el-rate>
        </p>
        <p class="money">£{{ storeDetail.retailPrice }}</p>
      </div>
      <div><el-button @click="handlePassword(storeDetail)">ORDER NOW <img src="../assets/images/store-detail-btn.png"></el-button></div>
      <div class="thumbs">
        <!-- swiper2 Thumbs -->
        <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
          <swiper-slide class="slide-1"><img :src="storeDetail.picUrl" alt=""></swiper-slide>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
      </div>
    </div>
    <div class="img-list">
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide class="slide-1"><img :src="storeDetail.picUrl" alt=""></swiper-slide>
      </swiper>
    </div>

    <payment v-if="paymentVisible" :paymentData="{goodsList:goodsList,total:total}" :paymentVisible="paymentVisible"
             @handlePayClose="handlePayClose"></payment>
    <password v-if="passwordVisible" :passwordVisible="passwordVisible"
              @handleClose="handleClose" @handlePayment="handlePayment"></password>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import payment from '../components/payment'
import password from '../components/password'

export default {
  name: "storeDetail",
  props: {
    storeDetail: {
      type: Object
    }
  },
  components: {
    swiper,
    swiperSlide,
    payment,
    password
  },
  data() {
    return {
      paymentVisible:false,
      passwordVisible:false,
      goodsList:'',
      total:'',
      swiperOptionTop: {
        spaceBetween: 10,
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  created() {
    console.log(this.storeDetail)
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
  methods:{
    handlePassword(data){
      data.num = 1
      delete data.specifications
      this.goodsList = [data]
      this.total = data.retailPrice
      this.passwordVisible = true
    },

    handlePayment() {
      this.passwordVisible = false
      this.paymentVisible = true
    },

    /**
     * 关闭支付弹窗
     */
    handlePayClose() {
      this.paymentVisible = false
    },
    handleClose() {
      this.passwordVisible = false
    },
  }
}
</script>

<style scoped lang="scss">
.flex {
  align-items: flex-start!important;
}

.store-detail {
  padding: 5.18vh 7.3vw 0;

  .content {
    width: 40%;
    overflow: hidden;
    .el-button{
      background: linear-gradient(90deg, #FFE96B 0%, #FFD55C 100%);
      border-radius: 60px;
      opacity: 1;
      border: none;
      color: #0C0C0C;
      padding: 19px 72px 19px 37px;
      position: relative;
      img{
        width: 27px;
        position: absolute;
        top: 50%;
        right: 27px;
        transform: translateY(-50%);
      }
    }
  }

  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center!important;
    margin: 3vh 0;
    .money{
      margin-left: 10px;
      font-size: 30px;
      color: #FFD40E;
    }
  }

  .name {
    font-size: 30px;
    color: #ffffff;
    padding-top: 13.8vh;
  }

  .thumbs{
    margin-top: 10vh;
  }

  .swiper-container {
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
    img{
      width: 100%;
      height: 100%;
    }
  }

  .img-list {
    width: 45.22vw;
    height: 72.3vh;
    margin-left: 10%;
    .swiper-wrapper{
      width: 100%;
      .swiper-slide{
        width: 100%!important;
      }
    }
  }

  .gallery-top {
    height: 100% !important;
    width: 100%;
  }

  .gallery-thumbs {
    height: 20% !important;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .gallery-thumbs .swiper-slide {
    width: 8.38vw;
    height: 13.35vh;
    background: #efefef;
  }

  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  .swiper-button-white{
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    top: 60%;
  }
}
</style>